<template>
  <a-modal :title="(model&&model.id) ? '编辑员工': '新增员工'" :width="600" :visible="visible" :confirmLoading="loading"
    @ok="handleOK" @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item label="id" style="display: none;">
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item label="姓名">
          <a-input style="width: 400px" v-decorator="['realName', { rules: [{ required: true, message: '请选择【姓名】' }] }]" />
        </a-form-item>

        <a-form-item label="手机号">
          <a-input style="width: 400px" v-decorator="['phone', { rules: [{ required: true, message: '请选择【手机号】' }] }]" />
        </a-form-item>

        <a-form-item label="所属代理商">
          <a-select style="width: 400px"
            v-decorator="['agentId', { rules: [{ required: true, message: '请选择【所属代理商】' }] }]">
            <a-select-option v-for="item in agentList" :value="item.id">{{ item.agentName }}</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import {
    listByPage
  } from '@/api/agent'
  import moment from 'moment'
  // 表单字段
  const fields = ['realName', 'phone', 'id', 'agentId']
  const baseApi = process.env.VUE_APP_API_BASE_URL
  export default {
    name: 'AgentUserAddForm',
    components: {},
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data() {
      this.formLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 18
          }
        }
      }
      return {
        agentList: [],
        agentId: '',
        form: this.$form.createForm(this)
      }
    },
    created() {
      
      // 加载代理商列表，2024年11月10日12:13:55
      this.loadAgentList()
      
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))

      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        if (this.model) {
          this.form.setFieldsValue(pick(this.model, fields))
        }
      })
    },
    methods: {
      loadAgentList(){
          listByPage(Object.assign({page: 1, limit: 1000})).then(res => {
            this.agentList = res.data.records
          }).catch(()=>{})
      },
      handleOK() {
        this.$emit('ok')
      }
    }
  }
</script>
<style scoped lang="less">
  .avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .upload-wrapper {
    display: flex;
  }

  .img-list {
    display: flex;

    .img-item {
      position: relative;
      width: 100px;
      height: 100px;
      padding: 4px;
      overflow: hidden;
      box-sizing: border-box;
      margin-right: 10px;
      border-radius: 10px;
      overflow: hidden;

      &:hover .img-list .img-item .mask {
        display: block;
      }

      .img {
        height: 100%;
        width: 100%;
      }
    }

    .upload-btn {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

    }

    .myicon {
      font-size: 20px;
      color: #fff;

      &:hover {
        color: #1890ff;
      }
    }

    .mask {
      display: none;
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, .65);
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .notice-text {
    color: #f5222d;
  }
</style>